<div class="login-page">
  <div class="panel">
    <div class="panel-image"></div>
    <div class="panel-body">
      <div class="form-title">
        <h1 nz-typography>NgProject</h1>
      </div>
      <div class="form">
        <form nz-form [formGroup]="validateForm">
          <nz-form-item>
            <nz-form-control nzErrorTip="请输入用户名">
              <nz-input-group nzPrefixIcon="user" nzSize="large">
                <input
                  nz-input
                  placeholder="用户名"
                  formControlName="loginName"
                />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control nzErrorTip="请输入密码" nzValidateStatus>
              <nz-input-group
                nzPrefixIcon="lock"
                [nzSuffix]="passwordSuffix"
                nzSize="large"
              >
                <input
                  [type]="showPassword ? 'text' : 'password'"
                  nz-input
                  placeholder="密码"
                  formControlName="password"
                />
              </nz-input-group>
              <ng-template #passwordSuffix>
                <i
                  nz-icon
                  [nzType]="showPassword ? 'eye-invisible' : 'eye'"
                  (click)="showPassword = !showPassword"
                ></i>
              </ng-template>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control>
              <label nz-checkbox>
                <span>记住我</span>
              </label>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control>
              <button
                nz-button
                nzType="primary"
                nzBlock
                [disabled]="validateForm.invalid"
                [nzLoading]="hasClicked"
                (click)="submitForm()"
              >
                登录
              </button>
            </nz-form-control>
          </nz-form-item>
        </form>
      </div>
      <div class="company">
        <p nz-typography nzType="secondary">
          技术支持：安徽贝慕信息科技有限公司
        </p>
      </div>
    </div>
  </div>
</div>
